<!--
 * @Author: licongwei
 * @Date: 2022-03-10 15:59:10
 * @Description: 脉冲动效
-->
<template>
  <div class="pulse" :style="{ width: itemNum * (itemW + 2 * itemGap) + 'px' }">
    <i
      class="item"
      v-for="(item, index) of itemArr"
      :key="index"
      :style="{
        width: itemW + 'px',
        height: itemH - index ** 1.4 + 'px',
        opacity: itemIndex > index ? 0.2 : 1
      }"
    ></i>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount, reactive, toRefs } from 'vue'
interface IState {
  // eslint-disable-next-line no-undef
  timer: NodeJS.Timer | null
  flag: boolean
  itemIndex: number
  itemArr: any[]
  itemNum: number
  itemW: number
  itemH: number
  itemGap: number
}
export default defineComponent({
  name: 'pulse',
  setup() {
    const state: IState = reactive({
      timer: null,
      flag: true,
      itemIndex: 0,
      itemArr: [],
      itemNum: 8,
      itemW: 7,
      itemH: 26,
      itemGap: 4
    })

    state.itemArr = new Array(state.itemNum).fill('')
    state.timer = setInterval(() => {
      if (state.flag) {
        state.itemIndex++
        if (state.itemIndex === state.itemNum) state.flag = false
      } else {
        state.itemIndex--
        if (state.itemIndex === 0) state.flag = true
      }
    }, 300)

    onBeforeUnmount(() => {
      state.timer && clearInterval(state.timer)
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>
<style lang="less" scoped>
.pulse {
  position: absolute;
  top: 52px;
  left: 574px;
  font-size: 0;
  display: flex;
  flex-direction: row-reverse;
  .item {
    margin: 0 2px;
    display: inline-block;
    // background-color: #31aaff;
    background-color: #086eef;
    transform: skew(42deg, 0);
    transition: opacity 0.2s;
  }
}
</style>
